<template>
  <!--模板-->
  <el-row :gutter="20" >
    <el-col :span="18">
      <nf-form-card
        :model="model"
        :partModel="model2"
        v-bind="formProps"
        :childPropsList="itemMeta"
        :formMeta="formMeta"
      ></nf-form-card>
    </el-col>
    <el-col :span="6">
      <el-button @click="setTwo">双列</el-button>
      <el-button @click="setOne">单列</el-button>
      <div
        v-for="(item, key) in model"
        :key="key"
      >
        {{key}}：<span v-if="Array.isArray(item)">【
          <div v-for="item2 in item" :key="item2">
            &nbsp; &nbsp; {{item2}}
          </div>
          】
        </span>
        <span v-else>{{item}}</span>
      </div>
    </el-col>
  </el-row>
  
</template>

<script lang="ts">
  import { defineComponent, reactive } from 'vue'
  import { createModel, nfFormCard ,  _formDrag } from '../../../../lib-elp/main'

  import _formMeta from '../form-item/form.json'
  type ITest = {
    text: string,
    area: string,
    pwd: string
  }
  export default defineComponent({
    name: 'nf-elp-form-card',
    directives: {
      formDrag: _formDrag
    },
    components: {
      nfFormCard
    },
    props: {
    },
    setup(props, context) {

      // _formMeta.formMeta.colOrder = [101, 100, 102]
      const json = reactive(_formMeta)
      // console.log('读取的 json：', formMeta)
      const {
        formMeta,
        formProps,
        itemMeta
      } = json

      formMeta.columnsNumber = 1
      // const { colOrder } = json.formMeta
      const model2 = reactive({})

      // 根据 meta 创建表单的 model
      const model =  createModel<ITest>(itemMeta, formMeta.colOrder)

      // console.log('读取的 json：', formMeta)


      const setTwo = () => {
        formMeta.subMeta.cardColCount = 2
        formMeta.columnsNumber = 1
      }

      
      const setOne = () => {
        formMeta.subMeta.cardColCount = 1
        formMeta.columnsNumber = 1
      }

      return {
        formMeta,
        formProps,
        itemMeta,
        model2,
        setOne,
        setTwo,
        model
      }
    }
  })
</script>